<template>
  <div style="margin: 20px;">
    <el-form label-position="left" inline class="demo-table-expand" v-model="listData" style="margin-left: 100px;">
      <el-form-item label="作业名称">
        <span>{{ listData.name }}</span>
      </el-form-item>
      <el-form-item label="耗时">
        <span v-if="this.duration == -1">&emsp;&emsp;0 s</span>
        <span v-else>&emsp;&emsp;{{ this.duration }} s</span>
      </el-form-item>
      <el-form-item label="分发账户">
        <span>{{ listData.target_account }}</span>
      </el-form-item>
      <el-form-item label="状态">
        <span v-if="this.is_final === 0" style="color: green;">&emsp;&emsp;Running</span>
        <span v-else style="color: red;">&emsp;&emsp;Stop</span>
      </el-form-item>
      <el-form-item label="目标路径">
        <span>{{ listData.file_target_path }}</span>
      </el-form-item>
      <el-form-item label="创建时间">
        <span>{{ listData.create_time }}</span>
      </el-form-item>
    </el-form>
    <div style="margin: 5px 5px 0px;
          padding: 3px;
          border: 1px dashed rgb(0, 160, 198);
          background-color: rgb(0,0,0);">
    <code style="background-color: rgb(0, 0, 0);color:#00ff00">
        <br>
        <span v-for="n in showText" :style="{'color': n.color}"> <pre style=" white-space: pre-wrap;" v-html="n.text"></pre> <br></span>
        <br>
    </code>
    </div>
  </div>
</template>

<script>

import { IssueDetail } from '../../api/configure'

export default {
  name: 'task-run',
  data() {
    return {
      listData: null,
      listId: '',
      showText: [],
      timeout1: 0,
      duration: -1,
      is_final: 0
    }
  },
  created() {
    this.listId = this.$route.query.id
    this.getList()
  },
  methods: {
    getList() {
      var _this = this
      IssueDetail(this.listId).then(response => {
        this.listData = response.data
        var listInfo = response.data.file_record
        var finalStatus = 0
        var files = this.listData.files.split('\n')
        this.showText = []
        var color = '#00ff00'
        for (let i = 0; i < listInfo.length; i++) {
          this.listResult = listInfo[i]
          if (parseInt(listInfo[i].duration) !== -1) {
            this.duration += parseInt(listInfo[i].duration)
            if (i === (listInfo.length - 1)) {
              this.duration++
            }
          }
          if (listInfo[i].is_final === 1) {
            finalStatus++
          }
          if (finalStatus === listInfo.length) {
            this.is_final = 1
          }
          if (this.listResult.status === '0') {
            color = 'red'
          }
          try {
            var text = JSON.parse(this.listResult.memo)
          } catch (e) {
            console.log(e)
          }
          if (typeof text === 'string') {
            this.showText.push({ text: this.listResult.memo, 'color': color })
          } else if (Object.prototype.toString.call(text) === '[object Array]') {
            this.showText.push({ text: 'Transfer', 'color': color })
            for (var j = 0; j < text.length; j++) {
              try {
                this.showText.push({ text: 'From:' + text[j].LocalFilePath, 'color': color })
                this.showText.push({ text: 'To IP:' + text[j].Host + '  Path:' + text[j].RemoteFilePath, 'color': color })
                if (text[j].Error) {
                  this.showText.push({ text: '=============', 'color': color })
                  if (this.listResult.duration === this.listData.timeout) {
                    this.showText.push({ text: files[i] + '分发超时', 'color': color })
                    this.showText.push({ text: '=============', 'color': color })
                  } else {
                    this.showText.push({ text: files[i] + '分发出错', 'color': color })
                    this.showText.push({ text: '=============', 'color': color })
                  }
                } else {
                  this.showText.push({ text: '=============', 'color': color })
                  this.showText.push({ text: files[i] + '分发完成', 'color': color })
                  this.showText.push({ text: '=============', 'color': color })
                }
              } catch (e) {
                console.log(e)
              }
            }
          } else {
            if (text !== '' && text !== undefined) {
              this.showText.push({ text: '=============', 'color': color })
              if (this.listResult.duration === this.listData.timeout) {
                this.showText.push({ text: files[i] + '分发超时', 'color': color })
                this.showText.push({ text: '=============', 'color': color })
              } else {
                this.showText.push({ text: files[i] + '分发出错', 'color': color })
                this.showText.push({ text: '=============', 'color': color })
              }
            } else {
              this.showText.push({ text: 'There is nothing to show!', 'color': '#ffff00' })
            }
          }
          if (this.listResult.is_final === 0) {
            this.timeout1 = setTimeout(function() { _this.getList() }, 4000)
          }
        }
        if (this.is_final === 1) {
          this.showText.push({ text: '分发结束', 'color': color })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
  .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
</style>
